// element-plus全局样式
.el-loading-mask {
  @include useTheme {
    // hex拼接alpha形成半透明遮罩色
    --el-mask-color: #{getTheme('sv-admin-mask-color') + 'aa'};
  }
}

.el-popper {
  @include useTheme {
    color: #{getTheme('sv-admin-text-color')};
    --el-text-color-regular: #{getTheme('sv-admin-text-color')};
    --el-bg-color-overlay: #{getTheme('sv-admin-popper-bg-color')};
    --el-fill-color-light: #{getTheme('sv-admin-hover-color')};
    --el-dropdown-menuItem-hover-fill: #{getTheme('sv-admin-hover-color')};
    --el-dropdown-menuItem-hover-color: #{$uni-color-primary};
    --el-fill-color-blank: #{getTheme('sv-admin-popper-bg-color')};
    --el-text-color-primary: #{getTheme('sv-admin-border-hl-color')};
    --el-border-color-light: #{getTheme('sv-admin-border-color')};
    --el-disabled-bg-color: #{getTheme('sv-admin-popper-bg-color')};
    --el-disabled-border-color: #{getTheme('sv-admin-border-color')};
    --el-border-color-extra-light: #{getTheme('sv-admin-hover-hl-color')};

    :deep(.el-date-table) {
      --el-datepicker-inrange-bg-color: #{getTheme('sv-admin-hover-color')};
    }
    :deep(.el-time-spinner__item.is-active) {
      --el-text-color-primary: #{$uni-color-primary};
    }
    :deep(.el-table) {
      --el-bg-color: #{getTheme('sv-admin-popper-bg-color')};
      --el-border-color-lighter: #{getTheme('sv-admin-border-color')};
    }
    :deep(.el-dropdown-menu) {
      --el-border-color-lighter: #{getTheme('sv-admin-border-color')};
    }

    :deep(.el-table-filter__content) {
      .el-table-filter__checkbox-group .el-checkbox {
        display: flex;
        align-items: center;
        height: 30px;
      }
    }
    :deep(.el-table-filter__bottom) {
      --el-border-color-lighter: #{getTheme('sv-admin-border-color')};

      & button {
        background: transparent;
        border: none;
        cursor: pointer;
      }
      & button.is-disabled {
        cursor: not-allowed;
      }
    }
  }
}

.el-message-box {
  @include useTheme {
    --el-bg-color: #{getTheme('sv-admin-popper-bg-color')};
    --el-border-color-lighter: #{getTheme('sv-admin-border-color')};
    --el-messagebox-title-color: #{getTheme('sv-admin-text-hl-color')};
    --el-messagebox-content-color: #{getTheme('sv-admin-text-color')};
  }
}

// 指定sv-admin-element-plus全局样式
.sv-el-menu {
  --el-menu-horizontal-height: #{$sv-admin-nav-bar-height};
  --el-menu-active-color: #{$uni-color-primary};
  --el-menu-hover-text-color: #{$uni-color-primary};
  border-right: unset !important;

  @include useTheme {
    --el-menu-border-color: #{getTheme('sv-admin-border-color')};
    --el-menu-bg-color: #{getTheme('sv-admin-bg-color')};
    --el-menu-text-color: #{getTheme('sv-admin-text-color')};
    --el-menu-hover-bg-color: #{getTheme('sv-admin-hover-color')};
  }
}

.sv-el-tag {
  @include useDarkTheme {
    background-color: getTheme('sv-admin-bg-color');
  }
  &:active {
    @include useTheme {
      background-color: getTheme('sv-admin-mask-hl-color');
    }
  }
}

.sv-el-form {
  @include useTheme {
    --el-fill-color-blank: #{getTheme('sv-admin-bg-color')};
    --el-text-color-regular: #{getTheme('sv-admin-text-color')};
  }
}

.sv-el-table {
  @include useTheme {
    --el-fill-color-blank: #{getTheme('sv-admin-bg-color')};
    --el-table-bg-color: #{getTheme('sv-admin-bg-color')};
    --el-table-tr-bg-color: #{getTheme('sv-admin-bg-color')};
    --el-table-border-color: #{getTheme('sv-admin-border-color')};
    --el-table-header-bg-color: #{getTheme('sv-admin-mask-hl-color')};
    --el-table-header-text-color: #{getTheme('sv-admin-text-sub-color')};
    --el-table-text-color: #{getTheme('sv-admin-text-color')};
    --el-table-row-hover-bg-color: #{getTheme('sv-admin-hover-color')};
    --el-table-expanded-cell-bg-color: #{getTheme('sv-admin-bg-color')};

    :deep(.cell) {
      line-height: unset;
    }

    :deep(.el-button) {
      --el-fill-color-light: #{getTheme('sv-admin-hover-color')};
      &:active {
        color: $uni-color-primary;
        background-color: #{getTheme('sv-admin-hover-color')};
      }
    }
    :deep(.el-button-group .el-button) {
      --el-button-text-color: #{getTheme('sv-admin-text-color')};
      --el-button-hover-bg-color: #{getTheme('sv-admin-hover-color')};
      --el-button-hover-text-color: #{getTheme('sv-admin-hover-color')};
      --el-fill-color-light: #{getTheme('sv-admin-mask-hl-color')};
      &:active {
        background-color: #{getTheme('sv-admin-hover-color')};
      }
    }
  }

  @include useDarkTheme {
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(255, 255, 255, 0.15);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(255, 255, 255, 0.15);

    :deep(.el-button) {
      --el-button-text-color: #{getTheme('sv-admin-text-color')};
    }
  }

  // 响应式处理 - 移动端取消列固定
  @media screen and (max-width: 768px) {
    .el-table__header-wrapper .el-table-fixed-column--right,
    .el-table__header-wrapper .el-table-fixed-column--left,
    .el-table__body-wrapper .el-table-fixed-column--right,
    .el-table__body-wrapper .el-table-fixed-column--left {
      position: unset !important;
    }
  }
}

.sv-el-pagination {
  @include useTheme {
    --el-fill-color-blank: transparent;
    --el-text-color-regular: #{getTheme('sv-admin-text-color')};
    --el-pagination-button-color: #{getTheme('sv-admin-text-sub-color')};

    // 部分样式在uniapp中会丢失，需要手动覆盖样式
    .btn-prev,
    .btn-next {
      background: transparent;
      border: none;
      cursor: pointer;
      color: getTheme('sv-admin-text-sub-color');

      &[aria-disabled='true'] {
        cursor: no-drop;
      }

      &:active {
        background: #{getTheme('sv-admin-hover-color')} !important;
      }
    }
  }
}

.sv-el-drawer {
  @include useTheme {
    --el-drawer-bg-color: #{getTheme('sv-admin-bg-color')};
  }
}

@media screen and (min-width: 1600px) {
  .sv-el-drawer {
    width: 40% !important;
  }
}

@media screen and (max-width: 1600px) {
  .sv-el-drawer {
    width: 60% !important;
  }
}

@media screen and (max-width: 1200px) {
  .sv-el-drawer {
    width: 80% !important;
  }
}

@media screen and (max-width: 768px) {
  .sv-el-drawer {
    width: 100% !important;
  }
}

.sv-el-input-number {
  @include useTheme {
    --el-fill-color-light: #{getTheme('sv-admin-bg-color')};
    --el-disabled-bg-color: #{getTheme('sv-admin-mask-color')};
  }
}

.sv-el-input {
  @include useTheme {
    --el-input-bg-color: #{getTheme('sv-admin-bg-color')};
    --el-disabled-bg-color: #{getTheme('sv-admin-mask-color')};
    --el-text-color-regular: #{getTheme('sv-admin-text-color')};

    :deep(.el-input-group__append) {
      background-color: transparent;
    }
  }
}

.sv-el-select {
  min-width: 150px;

  @include useTheme {
    .el-select__wrapper.is-disabled {
      background-color: #{getTheme('sv-admin-mask-color')};
      color: #{getTheme('sv-admin-text-color')};
    }
  }
}

.sv-el-dialog {
  @include useTheme {
    --el-dialog-bg-color: #{getTheme('sv-admin-dialog-bg-color')};
    --el-text-color-primary: #{getTheme('sv-admin-text-color')};
    border: 1px solid #{getTheme('sv-admin-border-color')};
  }
}

.sv-el-descriptions {
  @include useTheme {
    --el-fill-color-blank: #{getTheme('sv-admin-card-color')};
    --el-text-color-primary: #{getTheme('sv-admin-text-sub-color')};
    --el-text-color-regular: #{getTheme('sv-admin-text-color')};
  }
}

.el-message-box {
  @include useTheme {
    --el-bg-color: #{getTheme('sv-admin-popper-bg-color')};
    --el-border-color-lighter: #{getTheme('sv-admin-border-color')};
    --el-messagebox-title-color: #{getTheme('sv-admin-text-hl-color')};
    --el-messagebox-content-color: #{getTheme('sv-admin-text-color')};
  }
}

.sv-el-avatar {
  @include useTheme {
    --el-avatar-bg-color: #{getTheme('sv-admin-bg-color')};
  }
}

.sv-el-tree {
  background: unset !important;
  color: unset !important;

  @include useTheme {
    --el-color-primary-light-9: #{getTheme('sv-admin-hover-hl-color')};
    --el-tree-node-hover-bg-color: #{getTheme('sv-admin-hover-hl-color')};
  }
}

.sv-el-date-picker {
  @include useTheme {
    --el-disabled-bg-color: #{getTheme('sv-admin-mask-color')};
  }
}
